<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MDWiki Editor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
  <link href="lib/dropzone/downloads/css/basic.css" rel="stylesheet" />
  <style type="text/css" media="screen">
    .holder {
      min-height: 300px;
      border: 10px dashed #ccc;
      margin: 20px auto;      
    }

    #wiki-root-drag form {
      height: 300px;
    }

    #wiki-preview {
      width:100%;      
    }

    #tab-preview, #tab-edit, #tab-search, #tab-set-wiki-root, #search-result {
      padding-top: 1em;
    }

    #editor-and-preview {
      overflow-y: scroll;
    }

    #search-result .panel-heading:hover {
      cursor: pointer;
    }

    .panel-heading .badge {
      float: right;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">        
        <form class="form-inline" role="form">
          <div class="form-group">
            <div id="toolbar" class="btn-group">
              <button type="button" id="refresh" class="btn btn-primary btn-lg" data-toggle="tooltip" title="Refresh current wiki"><i class="fa fa-fw fa-refresh"></i>Refresh</button>
              <button type="button" id="edit-external" class="btn btn-default btn-lg" data-toggle="tooltip" title="Edit current wiki with associated external editor"><i class="fa fa-fw fa-external-link"></i>Edit with...</button>
              <button type="button" id="locate" class="btn btn-default btn-lg" data-toggle="tooltip" title="Open where current wiki source file resides" ><i class="fa fa-fw fa-folder-open"></i>Folder</button>
              <button type="button" id="server" class="btn btn-default btn-lg" data-toggle="tooltip" title="To debug in external browsers"><i class="fa fa-fw fa-play"></i>Start Web Server</button>
            </div>
            <label for="server_port" class="">Port:</label>
            <input type="text" class="form-control" id="server_port" placeholder="8080">
          </div>
        </form>
      </div>
    </div>    
    <ul class="nav nav-tabs" id="main-tabs">
      <li class="" >
        <a data-toggle="tab" href="#tab-preview">Explore</a>
      </li>
      <li class="">
        <a data-toggle="tab" href="#tab-edit">Edit</a>
      </li>
      <li class="">
        <a data-toggle="tab" href="#tab-search">Search</a>
      </li>
      <li class="active">
        <a data-toggle="tab" href="#tab-set-wiki-root">Change wiki root</a>
      </li>
    </ul>
    <div class="tab-content">      
      <div class="tab-pane row" id="tab-preview">
        <div class="col-md-12">
          <iframe id="wiki-preview" nwdisable nwfaketop>    
          </iframe>      
        </div>
      </div>
      <div class="tab-pane" id="tab-edit">
        <div class="row">
          <div class="col-md-7">            
            <div id="editor-status">
              <div id="tab-edit-alert" class="alert alert-danger">
                <div id="tab-edit-alert-content">
                </div>              
              </div>
              <div id="tab-edit-info" class="alert alert-info">
                <div id="tab-edit-info-content">
                </div>              
              </div>
              <div id="img-paste-dialog" class="row">   
                <div class="col-md-3">
                  <img style="max-width: 180px; max-height: 180px;" id="img-paste" src="">
                </div>           
                <div class="col-md-3">
                  <form class="form-inline">
                    <div class="form-group">
                      <input type="text" name="image-file" id="image-file"></input>
                    </div>   
                    <button type="button" id="image-save" class="btn btn-primary" style="margin-top: 0.5em">Save and insert image</button>                
                  </form>
                </div>
              </div>
            </div>
            <div id="editor-toolbar"></div>
          </div>
        </div>
        <div class="row" id="editor-and-preview">
          <div class="col-md-7">                       
            <div id="editor" style="width:100%;height: 600px">          
            </div>            
          </div>
          <div class="col-md-5">
            <div id="editor-preview"></div>
          </div>
        </div>                        
      </div>
      <div class="tab-pane" id="tab-search">
        <div class="row">
          <div class="col-md-6">
            <form class="form-inline" role="form" action="#">
              <div class="input-group">
                <input type="text" class="form-control" id='search-target'>
                <span class="input-group-btn">
                  <button class="btn btn-primary" type="submit" id="search">Go!</button>
                </span>
              </div>
            </form>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div id="search-result"></div>
          </div>
        </div>
      </div>
      <div class="tab-pane active" id="tab-set-wiki-root">
        <div class="row">
          <div class="col-md-12">
              <div id="wiki-root-drag" class="holder">
                <form action="#"
                  class="dropzone"
                  id="wiki-root"></form>
              </div>         
          </div>          
        </div>
      </div>   
    </div>
  </div>  
  
  <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="lib/marked/lib/marked.js"></script>
  <script type="text/javascript" src="lib/ace-builds/src-min-noconflict/ace.js"></script>
  <script type="text/javascript" src="lib/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
  <script type="text/javascript" src="lib/dropzone/downloads/dropzone.min.js"></script>
  <script type="text/javascript" src="js/vendor/snippets.js"></script>
  <script type="text/javascript" src="js/vendor/jquery.paste_image_reader.js"></script>

  <script type="text/javascript" src="js/old_app.js"></script>
  <script type="text/javascript" src="js/main/app.js"></script>
</body>
</html>
